<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />

    <style media="screen">
        .bottom-imgs {
            width: 7.65rem;
            height: 1.8rem !important;
            line-height: .7rem !important
        }

        .aui-bar-tab .aui-bar-tab-item {
            height: 1.8rem;
            width: auto;
        }

        .bottom-imgs img {
            height: 1.1rem;
            width: 1.1rem;
            color: #000;
            display: inline-block;
        }

        .btns {
            width: 10.5rem
        }

        .join-btn {
            width: 5.25rem;
            background: #FCE9E8;
            height: 2rem;
            line-height: 2rem;
            border-radius: 5rem 0 0 5rem;
            color: #E93324
        }

        .must-btn {
            width: 5.25rem;
            height: 2rem;
            line-height: 2rem;
            border-radius: 0 5rem 5rem 0;
        }

        .bottom {
            height: 2.7rem !important
        }
    </style>
</head>

<body>
    <div id='app'>


        <header class="aui-bar aui-bar-nav aui-bar-light" id="aui-header">
            <a class="aui-btn aui-pull-left" tapmode onclick="closeWin()">
                <span class="aui-iconfont aui-icon-left"></span>
            </a>
            <div class="aui-title text-color-0">商品详情</div>
        </header>
        <footer class="aui-bar aui-bar-tab flex-align-center bottom" id="footer">
            <div class="bottom-imgs">
                <div class="flex-justify-around">
                    <div class="aui-bar-tab-item" tapmode>
                        <img src="../image/main/main_home_unchecked.png" alt="">
                        <div class="aui-bar-tab-label text-color-0">首页</div>
                    </div>
                    <div class="aui-bar-tab-item" tapmode>
                        <img src="../image/main/main_cart_unchecked.png" alt="">
                        <div class="aui-bar-tab-label  text-color-0">购物车</div>
                    </div>
                    <div class="aui-bar-tab-item" tapmode @click='openShareModal'>
                        <img src="../image/common/share.svg" alt="">
                        <div class="aui-bar-tab-label  text-color-0">分享</div>
                    </div>
                </div>
            </div>
            <div class="btns flex-align-center ">
                <div class="join-btn font-14" tapmode>加入购物车</div>
                <div class="must-btn red-btn font-14" tapmode @click='toOrderConfirm'>立即购买</div>
            </div>
        </footer>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            toOrderConfirm: function() {
              console.log('111')
                api.openWin({
                    name: 'order-confirm',
                    url: './order-confirm.html',
                    pageParam: {
                        name: 'test'
                    }
                });
            },
            openShareModal: function() {
              console.log('222')

                api.openFrame({
                    name: 'share-modal',
                    url: './modal/share-modal.html',
                    bounces: true,
                    rect: {
                        x: 0,
                        y: 0,
                        w: api.winWidth,
                        h: api.winHeight
                    },
                    pageParam: {
                        data: 'goodsShare'
                    },
                    bgColor: 'rgba(0,0,0,0.6)',
                    bounces: false
                })
            }
        }

    });
    apiready = function() {
        api.parseTapmode();
        var header = $api.byId('aui-header');
        // $api.fixStatusBar(header);
        var headerPos = $api.offset(header);
        var body_h = $api.offset($api.dom('body')).h;
        var footerH = $api.offset($api.byId('footer')).h;
        api.openFrame({
            name: 'goods-detail_frm',
            url: 'goods-detail_frm.html',
            bounces: true,
            rect: {
                x: 0,
                y: headerPos.h,
                w: 'auto',
                h: api.winHeight - headerPos.h - footerH
            }
        })
    };

    function closeWin() {
        api.closeWin({});
    }
</script>

</html>
